@import "public";

#main {
  .m-title {
    .width(640rem);
    .padding(20rem, 20rem, 20rem, 20rem);
    //.height(24rem);
    background: url(../images/newest.png) no-repeat #f4f1f1;
    .backPosition(20rem, 24rem);
    .backSize(26rem, 24rem);
    .fontSize(24rem);
    color: #666666;
    .textIndent(30rem);
    position: fixed;
    top: 0;
    left:0;
  }
  .todelete {
    .width(80rem);
    .height(40rem);
    position: absolute;
    .right(20rem);
    .top(16rem);
    .borderRadius(8rem);
    background-color: #FD482C;
    color: #ffffff;
    text-align: center;
    .lineHeight(40rem);
    .fontSize(20rem);
  }
  .aa-title {
    .width(640rem);
    //.height(24rem);
    background: url(../images/c-book-icon.png) no-repeat #f4f1f1;
    .backPosition(20rem, 24rem);
    .backSize(26rem, 24rem);
    .fontSize(24rem);
    color: #666666;
    .padding(20rem, 20rem, 20rem, 20rem);
    .textIndent(30rem);
    position: fixed;
    top: 0;
    left:0;
    .mt-num {

    }
  }

  .m-list {
    .marginTop(80rem);
    .padding(0, 20rem, 0, 20rem);

    .no-data {
      width: 100%;
      text-align: center;
      .marginTop(240rem);
      .marginBottom(30rem);
      .fontSize(32rem);
      display: none;
    }
    ul li {
      width: 100%;
      .height(120rem);
      background-color: #ffffff;
      .marginBottom(20rem);
      .ml-img {
        float: left;
        img {
          .width(140rem);
          .height(100rem);
          float: left;
          .marginTop(12rem);
          .marginLeft(12rem);
        }
      }
      .ml-content {
        .width(415rem);
        float: left;
        .marginLeft(15rem);
        h3 {
          .fontSize(30rem);
          color: #111111;
          .marginTop(10rem);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

        }
        .mlc-right {
          width: 100%;
          .marginTop(20rem);
          .mlc-date {
            float: left;
            .fontSize(24rem);
            color: #bbbbbb;
          }
          .mlc-enable{
            float: right;
            .fontSize(20rem);
            .marginRight(16rem);
            color: #666666;
          }
          .mlc-num {
            float: right;
            .fontSize(24rem);
            color: #666666;
            .paddingLeft(40rem);
            background: url(../images/has-read.png) left center no-repeat;
            .backSize(36rem, 21rem);
          }
        }
      }
      .contenting {
        float: left;
      }
      .deleteing {
        .width(72rem);
        .height(120rem);
        float: left;
        text-align: center;
        background-color: #FD482C;
        .lineHeight(120rem);
        color: #ffffff;
        .fontSize(28rem);
        .marginLeft(4rem);
        display: none;
      }
    }
  }
  .m-add {
    .width(198rem);
    .marginAuto(0, 0);
    .ma-new {
      width: 100%;
      .height(198rem);
      background: url(../images/new-add.png) center no-repeat;
      .backSize(198rem, 198rem);
      a {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .ma-logo {
      .width(198rem);
      .height(70rem);
      background: url(../images/small-logo.png) center no-repeat;
      .backSize(173rem, 70rem);
    }
  }
}

#info {
  .user {
    .user-img {
      .width(160rem);
      .height(160rem);
      .marginAuto(96rem, 0);
      img {
        .width(150rem);
        .height(150rem);
        display: block;
        .marginAuto(0, 0);
        .border(10rem, solid, #dbd8d8);
        .borderCircle();
      }
    }
    .user-name {
      //.width(320rem);
      .marginAuto(20rem, 0);
      text-align: center;
      span {
        .fontSize(36rem);
        //float: left;
        display: inline-block;
      }
      .un-edit {
        .width(39rem);
        .height(40rem);
        //float: left;
        background: url(../images/edit.png) center no-repeat;
        .backSize(39rem, 40rem);
        .margin(5rem, 0, 0, 10rem);
        display: inline-block;
      }
    }
  }
  .i-info {
    width: 100%;
    .height(80rem);
    .marginTop(90rem);
    .padding(0, 30rem, 0, 30rem);
    background: url(../images/user-right.png) no-repeat #ffffff;
    .backPosition(585rem, 25rem);
    .backSize(19rem, 33rem);
    .marginTop(100rem);
    span {
      .width(24rem);
      .height(29rem);
      .marginTop(25rem);
      img {
        .width(24rem);
        .height(29rem);
        display: block;
      }

    }
    p {
      .fontSize(28rem);
      .marginLeft(20rem);
      .marginTop(20rem);
      color: #666666;
    }
  }

  .info-modify{
    .marginTop(60rem);
  }
  .of-modify{
    width: 100%;
    .height(80rem);
    .marginTop(20rem);
    .padding(0, 30rem, 0, 30rem);
    background-color: #ffffff;
    p{
      float: left;
      .width(144rem);
      .height(80rem);
      text-align: center;
      .lineHeight(80rem);
    }
    input{
      float: left;
      .width(410rem);
      .lineHeight(80rem);
      .height(80rem);
    }
  }
  .to-modify{
    .width(480rem);
    .height(80rem);
    .borderRadius(6rem);
    background-color: #FD482C;
    text-align: center;
    .lineHeight(80rem);
    .marginAuto(40rem,60rem);
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    button{
      color: #ffffff;
      .fontSize(32rem);
    }

  }
  .out-login {
    .width(580rem);
    .height(80rem);
    .borderRadius(6rem);
    background-color: #ff415c;
    text-align: center;
    .lineHeight(80rem);
    color: #ffffff;
    .fontSize(30rem);
    display: block;
    .marginAuto(265rem, 0);
  }
}